import React, {Component} from 'react'
import {Icon, Row, Col, Button, Popconfirm, message} from 'antd'
import {connect} from 'react-redux'
import '../../../less/index.less'
import {withRouter} from 'react-router-dom'
import * as taskActions from '../../../actions/task'
import UrlPattern from 'url-pattern'
import taskFeelingList from '../../../constant/task-feeling'
import {getUploadUrl} from '../../../constant/upload-url'
import {TwsReactMarkdownEditor} from 'tws-antd'
import { FormattedMessage } from 'react-intl'
import {convertContent} from '../../../constant/lang-util'

class SuggestionBox extends Component {
  constructor (props) {
    super(props)
    this.state = {
      showFeedbackInput: false,
      taskUserSuggestions: '',
      taskId: 1
    }
  }

  componentDidMount () {
    const pattern = new UrlPattern('/student/program/:programId/task/:taskId')
    const urlParams = pattern.match(this.props.location.pathname) || {}
    this.setState({
      taskId: urlParams.taskId
    }, () => {
      this.props.getTaskFeeling(this.state.taskId)
    })
  }

  showFeedbackInput () {
    this.setState({
      showFeedbackInput: !this.state.showFeedbackInput
    })
  }

  getSuggestion (taskId, feeling) {
    const taskSuggestion = {feeling, taskId}
    this.props.addTaskFeeling(taskId, taskSuggestion)
    if (feeling === 'hard') {
      this.showFeedbackInput()
    }
  }

  addSuggestionContent (taskId) {
    if (this.state.taskUserSuggestions === '') {
      message.warning(convertContent('吐槽内容不能为空'))
      return
    }
    this.props.addTaskSuggestion(taskId, this.state.taskUserSuggestions)
    this.showFeedbackInput()
  }

  render () {
    const {taskId, settings} = this.props
    const taskFeeling = this.props.taskFeeling.feeling || ''
    const feeling = taskFeelingList.find(task => task.feeling === taskFeeling) || {}
    return (
      <div>
        <div className='margin-t-4'>
          <p><FormattedMessage id='对本卡的感受如何' />？</p>
          {taskFeeling ? <p className='task-feeling-tip'>
            <FormattedMessage id='你的评价是' />：{<FormattedMessage id={feeling.feelingTip} />}</p> : ''
          }
          <Row className='margin-t-3'>
            {taskFeelingList.map((feeling, index) =>
              <Col span={8} key={index}>
                <Popconfirm cancelText='No' okText='Yes'
                  onConfirm={this.getSuggestion.bind(this, taskId, feeling.feeling)}
                  placement='topLeft' title={<FormattedMessage id='确定提交吗' />}>
                  <Button className={taskFeeling ? 'disabled' : ''}><Icon
                    type={feeling.iconType} />{<FormattedMessage id={feeling.feelingTip} />}
                  </Button>
                </Popconfirm>
              </Col>
                        )}
          </Row>
        </div>
        <div className='margin-t-3'>
          <p><FormattedMessage id='您还有什么要吐槽的吗' />
            <Button className='margin-l-2' onClick={this.showFeedbackInput.bind(this)}><Icon
              type='message' /><FormattedMessage id='要' /></Button>
          </p>
          <div className={this.state.showFeedbackInput ? 'margin-t-3 markdown-init' : 'hidden'}>
            <TwsReactMarkdownEditor
              action={getUploadUrl(settings.appContextPath)}
              value=''
              onChange={taskUserSuggestions => this.setState({taskUserSuggestions})} />
            <Button className='margin-t-2' type='primary'
              onClick={this.addSuggestionContent.bind(this, taskId)}><FormattedMessage id='提交' /></Button>
          </div>
        </div>
      </div>
    )
  }
}

const mapStateToProps = state => ({taskFeeling: state.taskFeeling, settings: state.settings})

const mapDispatchToProps = dispatch => ({
  addTaskFeeling: (taskId, taskFeeling) => {
    dispatch(taskActions.addTaskFeeling(taskId, taskFeeling))
  },
  addTaskSuggestion: (taskId, suggestionContent) => {
    dispatch(taskActions.addTaskSuggestionContent(taskId, suggestionContent))
  },
  getTaskFeeling: (taskId) => {
    dispatch(taskActions.getTaskFeeling(taskId))
  }
})

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(SuggestionBox))
